<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            display: flex;
            list-style: none;
        }
        
        li {
            margin-right: 20px;
        }
        
        .active {
            border: 1px solid red;
        }
    </style>
</head>


<div id="app">
    {{msg}}
    <button v-show="p>0" @click="index--">上一张</button>
    <button v-show="p<srcArr.length-1" @click="index++">下一张</button>
    <hr>
    <ul>
        <li :class="p==index?' active ':' '" v-for="(item,index) in srcArr" @click="btn(item,index,$event)">


            <img style="width: 40px " :src="item " alt=" ">
        </li>

    </ul>
    <img :src=" url " alt=" " style="width: 100px; ">




</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.min.js "></script>
<script>
    const vu = new Vue({
        el: "#app ",
        data: {
            msg: ' hello vue ',
            srcArr: [
                './imgs/11-00.gif ',
                './imgs/11-01.gif ',
                './imgs/11-02.gif ',
                './imgs/11-03.gif ',
                './imgs/11-04.png ',
                './imgs/11-05.png '

            ],
            url: './imgs/10-01.png ',
            p: 0,


        },
        methods: {
            btn(item, i, e) {
                this.url = item
                this.p = i
                console.log(e)

            }

        },
    })
</script>






</body>

</html>